<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8" />  
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<body>
<div id="app">
  <div v-show="flag" class="part">
    <div class="main-container">
        <div class="header">
            <div class="follow-bar" style="color: #72c3c7; border-bottom: 1px solid #72c3c7;">外出申请</div>
            <div class="follow-bar">外出记录</div>
        </div>
        <div class="user-container">
            <div class="image"><img src="https://s72.778899.men/2021/12/20/a25e6ebdc240e94abf40a0651e1dc034.png" alt=""></div>
            <div class="info">
                <div id="username">{{user.userName}}</div><div id="id">{{user.userId}}</div>
                <div id="user-xueyuan">地理与信息工程学院</div>
            </div>
        </div>
        <div class="alert-outschool-info">临时出校二维码</div>
        <div class="image-container">
            <div class="img-header">
                <div class="shalou">
                    <img src="https://s71.778899.men/2021/12/20/1529bf2fa74f45570d47444b183fc588.png" alt="">
                </div>
                <p>距离返校时间还剩: <time id="time">{{backTime}}</time></p>
            </div>
            <div id="qrcode-container">
                <div id="qrcode"></div>
            </div>
            <div id="img-footer-container">
                <p id="img-footer">请向校方检查人员出示二维码，扫码进出校~</p>
            </div>
        </div>
    </div>
  </div>
  <div v-show="!flag" class="part">
      <h3 id="info-title" style="color: white; padding-top: 20px;">输入你的信息以生成二维码</h3>
      <div class="input-group mb-3 user-form">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">姓名</span>
        </div>
        <input type="text" v-model="user.userName" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" placeholder="输入姓名">
      </div>
      <div class="input-group mb-3 user-form">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">学号</span>
        </div>
        <input type="text" v-model="user.userId" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" placeholder="输入学号">
      </div>
      <div class="d-grid gap-2 user-form">
        <button type="button" class="btn btn-primary" style="width: 100%;" v-on:click="showPNG" @keyup.enter.native="showPNG">确定</button>
      </div>
  </div>
</div>

<script>
let vue = new Vue({
  el: '#app',
  data: {
        // 是否已经输入账户 默认没有
        flag: false,      
        user: {
            userName: "",
            userId: ""
        },
        originBackTime: 0,
  },
  computed:{
    backTime(){
        return this.formatTime(this.originBackTime)
    }
  },
  methods:{
      showPNG: function(){
          new QRCode(document.getElementById("qrcode"),{
            text:this.user.userId.toString(),
            width: 180,
            height:180,
            colorDark: "#e27bce",
            colorLight: "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });
            let begin = new Date()
            let end = new Date(new Date().getTime() + 87623312)
            this.originBackTime = new Date(end - begin)
            window.setInterval(this.time_,1000)
            this.flag=true

        document.body.style.backgroundImage="url('')"
      },
    formatTime(timestamp){
            let time = new Date(timestamp)
            let day = time.getDay()
            let Hour = time.getHours()
            let Minutes = time.getMinutes()
            let second = time.getSeconds()
            return day + "天 " + Hour + ":" + Minutes + ":"+second
        },
    time_(){
        this.originBackTime = this.originBackTime - 1000
    }
  }
})
</script>
<style>

    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */} 
    @media only screen and (max-device-width :480px){ } 
    @media only screen and (min-device-width :481px){ } 

    /*6*/ 
    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ } 

    /*6+*/ 
    @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ } 

    /*魅族*/ 
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ } 

    /*mate7*/ 
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ } 

    /*4 4s*/ 
    @media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ } 
    body{
        background: url("https://s4.ax1x.com/2021/12/21/TMZYIP.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }
    #app{
        width: 100%;
        height: 100%;
        
    }

    .part{
        width: 100%;
        height: 100%;
    }
    .header{
        height: 35px;
        display: flex;
        background-color: white;
        font-weight: 600;
    }

    .follow-bar{
        width: 50%;
        text-align: center;
    }

    .user-container{
        height: 130px;
        background-color: #72c3c7;
    }

    .user-container{
        display: flex;
    }
    .user-container .image{
        width: 130px;
        height: 130px;
    }

    .image img{
        width: 80%;
        height: 80%;
        padding: 10%;
    }
    .user-container .info{
        color: white;
        display: flex;
        flex-wrap: wrap;
        height: 110px;
        align-content: center;
    }

    .info{
        padding-left: 10px;
    }
    .info #username{
        width: 20%;
        height: 20px;
        padding-bottom: 10px;
    }
    .info #id{
        width: 70%;
    }

    .alert-outschool-info{
        height: 45px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        font-size: 18px;
        font-weight: normal;
        border-bottom: 1px solid #eeeeee;
    }

    .image-container{
        display: flex;
        flex-wrap: wrap;
    }

    .img-header{
        color: #eeb562;
        display: flex;
        align-items: center;
        padding: 30px 0px 30px 0px;
        justify-content: center;
        width: 100%;
    }
    .shalou{
        height: 1.5em;
        width: 1.5em;
        margin-right: 0.5em;
    }
    .shalou img{
        width: 100%;
        height: 100%;
    }

    .img-header p{
        font-weight: normal;
        margin-bottom: 0px;
    }

    #qrcode-container{
        display: flex;
        width: 100%;
        justify-content: center;
    }
    #qrcode{
        width: 200px;
        height: 200px;
        border: 1px solid #eeeeee;
        padding: 10px;
    }

    #img-footer-container{
        display: flex;
        justify-content: center;
        width: 100%;
        color: #888888;
    }

    #img-footer{
        padding: 20px;
        font-size: 12px;
    }

    #info-title{
        text-align: center;
    }

    .user-form{
        padding: 30px 5px 30px 5px;
    }



</style>
</body>
</html>